<!--
 * @FilePath: Person.vue
 * @Author: luo
 * @Date: 2022-11-14 16:03:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-22 14:56:07
 * Copyright: 2022 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
<div class="container">
    <div class="header">
        <Header></Header>
    </div>
    <!-- 作者信息 -->
    <div class="profile-info-wrapper">
   
    <!-- 个人中心 -->
    <div class="person_box">

           <div class="avatar">
        <div v-if="user.avatar">
            <img class="auth-avator-img" :src="user.avatar" />
        </div>
        <div v-else>
            <img class="auth-avator-img" src="../../assets/image/header.png" />
        </div>
           </div>
      
        <div class="info_box">
            <h4>{{user.nickName}}</h4>
            <div class="data_box">
                <span class="data_num">{{user.likes}}</span><span class="data_span">获赞</span>
                <span class="data_num">{{user.fans}}</span><span class="data_span">粉丝</span>
                <span class="data_num">{{user.focus}}</span><span class="data_span">关注</span>
            </div>
            <div class="describe_box">
                <p>简介：{{user.describe}}</p>
            </div>
        </div>
    </div>
    <!-- 关注 当前登录的id和访问的id不相等  或者 当前登录用户id不存在-->
    <div class="profile-info-r" v-if="this.$store.state.userInfo.id != user.id || this.$store.state.userInfo.id ==''">
    
        <button class="ttp-user-subscribe" @click="doAttention" :class="isAttention ? '' :'profile-header-subscribe'">
            <span>{{attention}}</span>
        </button>
    </div>
</div>
    <!-- 文章内容 -->
    <div class="main-wrapper">
    <div class="main-l">
        <div role="main" class="profile-tabs-wrapper">
        <div class="profile-tabs-nav">
                <div v-show="open==false">
                    <button class="search-btn" type="button" @click="openSearch"></button>
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                     
                    
                        <el-tab-pane :label="item" v-for="(item,index) in navList" :name="index" :key="index">
                        </el-tab-pane>
                    </el-tabs>
                
                </div>
                <div v-show="open==true">
                    <div class="profile-search-input">
                        <div class="input-wrapper">
                            <input type="text" placeholder="搜索TA的作品" v-model="word" @input="searchWork" />
                        </div>
                       
                        <div class="search-actions">
                            <button type="button" class="search-submit disable" @click="searchWork" style="cursor: pointer;">搜索</button>
                            <div class="divide"></div>
                            <button type="button" class="search-cancel" @click="openSearch" style="cursor: pointer;">取消</button>

                        </div>
                    </div>
                </div>
               
          
            <div v-if="allArticle.length ==0">
                <div class="profile-empty-tab-tips">
                    <i></i>
                    <p :v-text="nullList">{{nullList}}</p>
                </div>
            </div>
            <div v-else>
                <div class="profile-article-card-wrapper" v-for="(item,index) in allArticle" :key="index">
                    <div class="feed-card-wrapper feed-card-article-wrapper">
                        <div class="feed-card-article single-cover">
                            <!-- 右边 -->
                            <div class="feed-card-article-r">
                                <div class="feed-card-cover"  @click="jumpPage(item)">
                                    <!-- 如果是文章 -->
                                  <div v-if="item.type===0">
                                    <a target="_blank" href="#">
                                        <img :src="item.firstImg" />
                                    </a>
                                  </div>
                                  <!-- 如果是视频 -->
                                <div v-if="item.type===1"  >
                                    <a target="_blank" href="#" style="poition:relative" >
                                        
                                        <el-icon style="position:absolute; top: 40px; left:50px;font-size: 33px; color: darkgrey; ">
                                            <VideoPlay />
                                        </el-icon>
                                        <img :src="item.url + '?vframe/jpg/offset/0'" style="object-fit: cover;  width:100%; height:128px;" />
                                    </a>
                                </div>
                                </div>
                            </div>
                            <!-- 左边 -->
                            <div class="feed-card-article-l">
                                <a href="#" class="title"  @click="jumpPage(item)">{{item.title}}</a>
                                <div class="feed-card-footer-cmp">
                                    <div class="left-tools" v-if="item.type===0">
                                        <div class="profile-feed-card-tools-text">{{item.views}}次阅读</div>
                                        <div class="feed-card-footer-time-cmp">{{item.updateTime}}</div>
                                    </div>
                                    <div class="left-tools" v-if="item.type===1">
                                        <div class="profile-feed-card-tools-text">{{item.playNum}}次播放</div>
                                        <div class="feed-card-footer-time-cmp">{{item.createTime}}</div>
                                    </div>
                                    <div class="right-tools"
                                    
                                    :style="{ display: isOther ? 'none' : 'block' }"
                                    >
                                        <div style="display: inline-block;">
                                            <div class="profile-feed-card-tools-actions" @mouseover="addActive(index)"
                                                @mouseout="removeActive()">
                                                <i class="el-icon-more"></i>
            
            
                                                <div class="actions-list-wrapper"
                                                    :style="{ 'display': collection && itemId ==index ? 'block' : 'none'}">
                                                    <!-- 取消收藏 -->
                                                    <div class="actions-list" role="menu">
            
                                                        <div class="action-item" role="menuitem" @click="Cancle(user.id,item)">{{doSomething}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           
      
        </div>
        <!-- 文章列表 -->
            <!-- <div class="profile-tab-feed">
               
                
            </div> -->
        </div>
    </div>
   
    <div class="main-r">
        <div class="profile-license">
            <div role="contentinfo" class="company-wrapper">
            <p>© 2022 今日头条
                <br />
                扫黄打非网上举报
                <br />
                网络谣言曝光台
                <br />
                网上有害信息举报
                <br />
                MCN 专项举报：mcnjubao@toutiao.com
                <br />
                未成年人相关举报：400-140-2108 按5
                <br />
                算法推荐专项举报：sfjubao@bytedance.com
                <br />
                京ICP证140141号
                <br />
                京ICP备12025439号-3 网络文化经营许可证
                <br />
                营业执照
                <br />
                京-非经营性-2016-0081
                <br />
                互联网药品信息服务资格证编号：(京)-经营性-2020-0077
                <br />
                互联网宗教信息服务许可证：京（2022）0000074
                <br />
                跟帖评论自律管理承诺书
                <br />
                京公网安备 11000002002023号
                <br />
                公司名称：北京抖音信息服务有限公司
            </p>
            </div>
        </div>
    </div>
    </div>
    </div>

</template>
<script>
import  Header from '../../components/public/Header'
import user from '@/api/user/user'
import article from '@/api/article/article'
import video from '@/api/vdo/video'



import { ref } from 'vue';
export default {
    name: 'DemoPerson',

    data() {
        return {
         
            user: {
                id: 2,
                userName: '罗宗雯',
                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                likes: 0,
                fans: 0,
                focus: 0,
                describe:'摄影爱好者'
                
            },
            activeIndex: 0,
            open:false,
            navList: ['全部', '文章', '视频', '收藏'],

    
            activeName: ref(0),
            // 文章信息
            allArticle: [],
            nullList: "",
            // 取消收藏
            collection: false,
            itemId: 0,
            doSomething: "",
            //搜索框
            word: "",
            attention: "关注",
            isAttention: false,
            // 他人访问
            isOther:false
         
          
        };
    },
    components: {
        Header,
       
    },

    mounted() {
        console.log(this.$route.params.id);
        this.user.id = this.$route.params.id;
        this.checkUser(this.user.id);
        this.findArtical();
        this.IsAttention();
        this.IsOther();
    },

    methods: {

        handleClick(tab, event) {
            console.log(tab, event);
            console.log(tab.props.name);
            this.activeIndex = tab.props.name;
            this.findArtical();
        },

        //根据id获取用户信息
        checkUser(id) {
            var that= this;
            user.getUser(id)
                .then(response => {
                    console.log(response);
                    that.user = response.data.data.userInfo;
                    console.log(that.user);
                    that.$message({
                        type: 'success',
                        message: '查询信息成功！'
                    })
                })
                .catch(function (error) {
                    //处理错误情况
                    console.log(error);
                    alert("服务器出错..")
                })
        },openSearch() {
            this.open = !this.open;
            this.findArtical();
        },
         findArtical() {
             var that = this;
             if (that.activeIndex == 0) {
                 console.log("全部");

                 that.nullList = "暂未作品";
                 that.doSomething = "删除";
                 user.allWork(that.user.id)
                     .then(function (response) {
                         if (response.data.code == 20000) {
                             that.allArticle = response.data.data.allWork;
                             console.log(response.data)
                             
                            
                         } else {
                             that.allArticle.length = 0;
                             //  ElMessage.error("获取个人内容失败！");
                         }
                     })
                 return
             }else if (that.activeIndex == 1) {
                console.log("文章");

                 that.nullList = "暂未发表文章";
                 that.doSomething = "删除文章";
                article.listAllArticle(that.user.id)
                    .then(function (response) {
                        if (response.data.code == 20000) {
                            that.allArticle = response.data.data.AllArticals;
                            console.log(response.data)
                        } else {
                           
                            that.allArticle.length = 0;
                          //  ElMessage.error("获取个人内容失败！");
                        }
                    })
                return
             } else if (that.activeIndex == 2) {
                 console.log("视频");
                 that.nullList = "暂无视频";
                 that.doSomething = "删除视频";

                 video.findVideoByUserId(that.user.id)
                     .then(function (response) {
                         if (response.data.code == 20000) {
                             that.allArticle = response.data.data.videos;
                             console.log(response.data)
                         } else {
                             // ElMessage.error("获取个人收藏失败！");
                             that.allArticle.length = 0;
                         }
                     })
                 return
               
             } else if (that.activeIndex == 3) {
                 console.log("收藏");
                 that.nullList = "暂无收藏作品";
                 that.doSomething = "取消收藏";
                 article.findColletion(that.user.id)
                     .then(function (response) {
                         if (response.data.code == 20000) {
                             that.allArticle = response.data.data.colletions;
                             console.log(response.data)
                         } else {
                             // ElMessage.error("获取个人收藏失败！");
                             that.allArticle.length = 0;
                         }
                     })
                 return
             }
        },
        addActive(index) {
            this.collection = true;
            this.itemId = index;
        },
        removeActive() {
          //  console.log(index);
            this.collection = false;
            this.itemId = 0;
        },
        Cancle(userId, item) {
            var that = this;
            if (that.doSomething === "取消收藏") {
                article.updateColletion(userId, item.id)
                    .then(function (response) {
                        if (response.data.code == 20000) {
                           //跳转
                            that.$message({
                                type: 'success',
                                message: '取消收藏成功！'
                               
                            })
                            that.findArtical();
                        } 
                    })  
            } else if (that.doSomething == "删除") {
                if (item.playNum != null) {
                         that.$confirm("是否删除此视频？")
                    .then(()=>{
                        video.deleteVod(item.id)
                            .then(function (response) {
                                if (response.data.code == 20000) {
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功'

                                    })
                                    that.findArtical();
                                }
                            })
                    })  
                } else if (item.views != null) {
                    that.$confirm("是否删除此文章？")
                        .then(() => {
                            article.deleteArticle(item.id)
                                .then(function (response) {
                                    if (response.data.code == 20000) {
                                        that.$message({
                                            type: 'success',
                                            message: '删除成功'

                                        })
                                        that.findArtical();
                                    }
                                })
                        })
                }
            }
        },
        // 跳转页面
        jumpPage(item) {
            if (item.playNum != null) {
                this.$router.push({
                    path: '/play/' + item.id
                })        
            } else if(item.views != null){
                this.$router.push({
                    path:'/article/'+item.id
                })
           }
        },
        searchWork() {
            
            var that = this; 
             
            user.searchByWorkByUserId(that.word, that.user.id)
                .then(function (response) {
                    if (response.data.code == 20000) { 
                        that.allArticle = response.data.data.allWork;
                    } else {
                        that.allArticle.length = 0;
                        that.nullList = "暂无相关内容";
                    }
                   
                })
        },
        //关注的请求
        doAttention() {
            var that = this;
            //如果我没有登录
            if (that.$store.state.userInfo.id == '') {
                //跳转页面
                that.$message({
                    type: 'warning',
                    message: '请先登陆'

                })
                that.$router.push({
                    name: 'login'
                })
            } else {
                if (that.isAttention == false) {
                    //做关注动作
                    that.isAttention = true;
                    article.addFocus(that.$store.state.userInfo.id, that.user.id)
                        .then(function (response) {
                            that.$message({
                                type: 'success',
                                message: '关注成功！'

                            })
                            console.log(response.data)
                        })
                    that.attention = "已关注";
                } else if (that.isAttention == true) {
                    //取消关注
                    that.isAttention = false;
                    //发送请求
                    article.cancelFocus(that.$store.state.userInfo.id, that.user.id)
                        .then(function (response) {
                            that.$message({
                                type: 'success',
                                message: '取消关注成功！'

                            })
                            console.log(response.data)
                        })
                    that.attention = "关注";
                }
            }
            
           
        },
        IsAttention() {
            var that = this;
            //判断是否有关注 登录的id that.$store.state.userInfo.id  = 访问的id that.user.id
            //判断是否有登录
            article.judgeFocus(that.$store.state.userInfo.id, that.user.id)
                .then(function (response) {
                    if (response.data.code != 20000) {
                        //如果关注了 取消关注
                        that.isAttention = true;
                        that.attention = "已关注";
                    } else {
                        that.isAttention = false;
                        that.attention = "关注";
                    }

                })

        },
        
        //判断是否是访问他人
        IsOther() {
            var that = this;
            if (that.$store.state.userInfo.id != that.user.id) {
                //如果是访问他人
                that.isOther = true;
            } else {
                that.isOther = false;
            }
        }
       
    },
};
</script>

<style>
@import '../../assets/css/Person.css';
.el-tabs__item.is-active {
    color: red !important;
}
.el-tabs__item:hover {
    color: red !important;
}
.el-tabs__active-bar {
   
    background-color: red !important;
}

*{
    
    margin: 0;
    padding: 0 auto;
}
button,input{
    outline: none;
}
.container{
    
    background: url(../../assets/image/bg.580ac401.png) no-repeat;
    background-size: 100% 410px;
    width: 100%;
    min-width: 1130px;
    min-height: 100vh;

}
/* 作者信息 */
.profile-info-wrapper{
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin: 44px auto 0;
    width: 1034px;
}
.header{
    width: 100%;
    height: 64px;
   
}
.person_box{
    height: 114px;
    width: 600px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.person_box   .avatar{
    position: relative;
    width: 112px;
    height: 112px;
    margin-right: 30px;
    
  
}
.person_box .avatar img{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
}
.person_box .info_box{
    height: 112px;
    width: 253px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.person_box .info_box h4{
    font-weight: bold;
}
.person_box .data_box .data_num{
    font-weight: bold;
    font-size: 20px;
    
}
.person_box .data_box .data_span{
    margin-right: 20px;
}
/* 文章内容 */
.main-wrapper{
    display: flex;
    justify-content: flex-start;
    margin: 48px auto 0;
    width: 1034px;
}
.main-wrapper .main-l{
    margin-right: 60px;
    width: 676px;
}
.profile-tabs-wrapper {
    min-height: calc(100vh - 40px);
}
.profile-tabs-nav {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px 0 13px;
}
.profile-tabs-nav ul{
    font-size: 0;
}

.profile-tabs-nav .nav_item{
    position: relative;
    display: inline-block;
    margin-right: 36px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #222;
    cursor: pointer;
    outline: none;
}
 .profile-tabs-nav .nav_item.active {
    font-weight: 500;
    color: #f04142;
}
.profile-tabs-nav .nav_item.active::after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 1px;
    width: 20px;
    height: 2px;
    background: #f04142;
}

/* 搜索框出现 */
.profile-tabs-nav .search-btn{
    cursor: pointer;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    padding: 0 6px 12px;
    width: 40px;
    height: 40px;
    background: url(//lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/icon_search.370b0735.svg) no-repeat 50%;
    background-clip: content-box;
    background-size: 28px 28px;
    background-position: top;
}
.profile-search-input {
    position: relative;
    z-index: 1;
   
    display: flex;
   
    justify-content: space-between;
    border-bottom: 1px solid rgb(220, 220, 220);
    padding-bottom: 13px;
    margin-bottom: 17px;
}
.profile-search-input .input-wrapper {
    
    flex: 1 1;
    position: relative;
    margin-right: 32px;
    padding-left: 32px;
}
.profile-search-input .input-wrapper:before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 28px;
    height: 28px;
    background: url(//lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/icon_search.370b0735.svg) no-repeat 50%;
    background-size: contain;
}
.profile-search-input .input-wrapper input {
  
    box-sizing: border-box;
    border: none;
    font-size: 14px;
    line-height: 24px;
    width: 100%;
    height: 100%;
    color: #222;
    background: none;
}

.profile-search-input .search-actions {
    
    flex-shrink: 0;
}
.profile-search-input .search-actions .search-submit {
    color: #222;
}
.profile-search-input .search-actions button {
    border: none;
    background: none;
    font-size: 14px;
    line-height: 24px;
    color: #999;
}
.profile-search-input .search-actions .divide {
    display: inline-block;
    transform: translateY(2px);
    margin: 0 16px;
    width: 1px;
    height: 16px;
    background: #e8e8e8;
}

/* 右边信息 */
.main-wrapper>.main-r {
    width: 298px;
}
.company-wrapper {
    font-size: 12px;
    line-height: 24px;
    color: #999;
}
</style>